<template>
  <li>
<label>
<input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/>
<!-- 如下代码也能实现功能,但是不太推荐,因为违反了不能修改props的原则 -->
<!-- <input type="checkbox" v-model="something" /> -->

<span>{{todo.title  }}</span>
</label>
<button class="btn btn-danger" @click="handleDelete(todo.id)" >删除</button>
</li>
</template>

<script>
    export default {
        name:'MyItem',
        props:['todo'],
        methods:{
          handleCheck(id){
            // this.checkTodo(id)
            this.$bus.$emit("checkTodo",id)
          },
          handleDelete(id){
            if(confirm("确认删除吗?")){
              // this.deleteTodo(id)
              this.$bus.$emit("deleteTodo",id)
            }
          }
        }
    }
</script>

<style scoped>
li{
list-style: none;height: 36px;line-height: 36px;padding: 0 5px;border-bottom: 1x solid #ddd;
}
li label {
float: left;
cursor: pointer;
}

li label li input {vertical-align:middle;margin-right:6px;position:relative; top:-1px;}
li button {float: right;display: none;margin-top: 3px;}

li:hover{
  background-color: #ddd;
}
li:hover button{
  display: block;
}
li:before {
content:initial;
}

li:last-child {border-bottom: none;}
</style>